<template>
  <div class="msite-full-container">
    <!-- 顶部导航栏 -->
    <el-header class="msite-header">
      <div class="header-content">
        <router-link to="/search" class="header-search">
          <el-icon><Search /></el-icon>
        </router-link>
        <div class="header-title">
          <span class="ellipsis">{{ currentAddress }}</span>
        </div>
      </div>
    </el-header>

    <!-- 内容区域 - 现在会占满宽度 -->
    <div class="msite-content">
      <!-- 食品分类轮播 -->
      <div class="category-swiper">
        <el-carousel v-if="categories.length" height="180px" indicator-position="outside">
          <el-carousel-item v-for="(page, index) in categoryPages" :key="index">
            <div class="category-page">
              <router-link 
                v-for="item in page" 
                :key="item.id" 
                to="/search" 
                class="category-item"
              >
                <div class="category-icon">
                  <img :src="getCategoryImage(item.name)" :alt="item.name">
                </div>
                <span class="category-name">{{ item.name }}</span>
              </router-link>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- 商家列表 -->
      <MerchantList />
    </div>
    
    <!-- 底部导航栏 -->
    <FooterGuide />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useCookies } from 'vue3-cookies';
import { Search, User } from '@element-plus/icons-vue';
import FooterGuide from '@/components/FooterGuide/FooterGuide.vue';
import MerchantList from '@/components/MerchantList/MerchantList.vue';
import Profile from '@/views/Profile.vue';

const { cookies } = useCookies();

// 用户信息
const userInfo = ref(null);
const currentAddress = ref('正在获取位置...');
const userLocation = ref({
  longitude: 116.404, // 默认北京经纬度
  latitude: 39.915
});

// 分类数据
const categories = ref([]);
const loadingCategories = ref(true);

// 商家加载状态
const loadingShops = ref(true);
const merchants = ref([]);

// 计算分类分页
const categoryPages = computed(() => {
  const pages = [];
  for (let i = 0; i < categories.value.length; i += 8) {
    pages.push(categories.value.slice(i, i + 8));
  }
  return pages;
});

// 获取用户信息
const getUserInfo = () => {
  const token = cookies.get('token');
  const userId = cookies.get('userId');
  if (token && userId) {
    userInfo.value = {
      id: userId,
      phone: cookies.get('phone')
    };
  }
};

// 获取当前位置
const getCurrentAddress = () => {
  const address = cookies.get('address') || '北京市朝阳区';
  currentAddress.value = address;
  
  // 尝试获取真实位置
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        userLocation.value = {
          longitude: position.coords.longitude,
          latitude: position.coords.latitude
        };
      },
      (error) => {
        console.error('获取位置失败:', error);
        // 使用默认位置
        userLocation.value = {
          longitude: 116.404,
          latitude: 39.915
        };
      }
    );
  }
};

// 获取分类图片
const getCategoryImage = (name) => {
  try {
    const imageName = name.replace(/\s+/g, '') + '.jpg';
    return new URL(`../assets/swp/${imageName}`, import.meta.url).href;
  } catch (error) {
    console.error('加载分类图片失败:', error);
    return new URL('../assets/msite_back.svg', import.meta.url).href;
  }
};

// 获取分类数据
const fetchCategories = async () => {
  try {
    // 模拟API请求
    setTimeout(() => {
      categories.value = [
        { id: 1, name: '美食' },
        { id: 2, name: '快餐便当' },
        { id: 3, name: '小吃夜宵' },
        { id: 4, name: '甜品饮品' },
        { id: 5, name: '果蔬生鲜' },
        { id: 6, name: '早餐' },
        { id: 7, name: '午餐' },
        { id: 8, name: '晚餐' },
        { id: 9, name: '下午茶' }
      ];
      loadingCategories.value = false;
    }, 800);
  } catch (error) {
    console.error('获取分类失败:', error);
    loadingCategories.value = false;
  }
};

// 处理商家数据更新
const handleMerchantsUpdate = (updatedMerchants) => {
  merchants.value = updatedMerchants;
  loadingShops.value = false;
};

// 初始化
onMounted(() => {
  getUserInfo();
  getCurrentAddress();
  fetchCategories();
});
</script>

<style scoped>
/* 新增全屏容器样式 */
.msite-full-container {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* 防止水平滚动 */
}
/* 内容区域样式 */
.msite-content {
  flex: 1;
  width: 100%;
  padding: 0;
  margin: 0;
}


.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0 10px;
}

/* 分类轮播样式调整 */
.category-swiper {
  width: 100%;
  background: #fff;
  margin: 10px 0 0 0;
}

.category-page {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 10px 0;
}


.msite-container {
  max-width: 100%; /* 移除最大宽度限制 */
  padding: 0; /* 移除内边距 */
}


/* 轮播图内部样式调整 */
.el-carousel {
  width: 100% !important; /* 重要：确保轮播图填满容器 */
}

.el-carousel__container {
  width: 100% !important; /* 重要：确保轮播容器填满 */
}

.msite-header {
  background-color: #02a774;
  color: white;
  height: 3.125rem; /* 50px -> 3.125rem */
  display: flex;
  align-items: center;
  padding: 0 0.625rem; /* 10px -> 0.625rem */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  width: 100%;
}


.header-title {
  flex: 1;
  text-align: center;
  padding: 0 10px;
}

.header-search .el-icon {
  font-size: 1.375rem; /* 22px -> 1.375rem */
  color: white;
}



.header-login {
  color: white;
  font-size: 0.875rem; /* 14px -> 0.875rem */
}

.header-login .el-icon {
  font-size: 1.375rem; /* 22px -> 1.375rem */
}


.category-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.625rem 0; /* 10px -> 0.625rem */
  text-decoration: none;
}

.category-icon {
  width: 3.125rem; /* 50px -> 3.125rem */
  height: 3.125rem; /* 50px -> 3.125rem */
  margin-bottom: 0.3125rem; /* 5px -> 0.3125rem */
}

.category-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-name {
  font-size: 0.75rem; /* 12px -> 0.75rem */
  color: #666;
}

.empty-categories {
  height: 11.25rem; /* 180px -> 11.25rem */
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-categories img {
  width: 6.25rem; /* 100px -> 6.25rem */
  height: 6.25rem; /* 100px -> 6.25rem */
}


</style>